<template>
  <div>
    <h3 ref="target">{{ state.x }}</h3>
    <button @click="btnClick">修改响应式数据</button>
    <button @click="stopWatch">停止监听数据</button>
    <hr />
    <h3>{{ state.y }}</h3>
    <button @click="btnClick2">监听y的变化</button>
  </div>
</template>
<script>
import { reactive, watch, ref } from 'vue'
export default {
  setup () {
    const state = reactive({
      x: 0,
      y: {
        xxx: 1
      }
    })
    const target = ref(null)
    function btnClick () {
      state.x++
      state.x++
    }
    const stop = watch(
      () => state.x,
      newVal => {
        console.log('当前值', newVal)
        console.log('dom的值：', target.value.innerHTML)
      },
      {
        flush: 'sync'
      }
    )
    function stopWatch () {
      stop()
    }

    //    deep使用

    watch(
      state,
      newVal => {
        console.log(newVal)
      },
      {
        // deep: true
      }
    )
    function btnClick2 () {
      //   state.y.xxx = Math.random()
      state.y = {
        xxx: Math.random()
      }
    }

    return { state, btnClick, stopWatch, target, btnClick2 }
  }
}
</script>
<style></style>
